<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>登录页面</title>


    <!-- ================= Favicon ================== -->
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">

    <!-- 静态引入Styles -->
    <link href="assets/css/lib/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/lib/simdahs.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <script src="/static/vue/vue.js"></script>

    <!-- 引入CSS文件 -->
    <link th:href="@{/static/assets/css/lib/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/static/assets/css/lib/themify-icons.css}" rel="stylesheet">
    <link th:href="@{/static/assets/css/lib/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/static/assets/css/lib/simdahs.css}" rel="stylesheet">
    <link th:href="@{/static/assets/css/style.css}" rel="stylesheet">

</head>

<body class="bg-primary">

<div class="unix-login" id="app">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-lg-offset-3">
                <div class="login-content">
                    <div class="login-logo">
                        <a href="https://blog.yxqz.top/"><span>流浪动物（www.yxqz.top)</span></a>
                    </div>
                    <div class="login-form">
                        <h4>后台管理登录</h4>
                        <form>
                            <div class="form-group">
                                <label>用户名：</label>
                                <input type="email" class="form-control"  placeholder="请输入你的登录用户名"
                                       v-model="user.username">
                            </div>
                            <div class="form-group">
                                <label>密 码：</label>
                                <input type="password" class="form-control" placeholder="请输入你的登录密码"
                                       v-model="user.password">
                            </div>
                            <!--								记住我 和忘记密码-->
                            <!--								<div class="checkbox">-->
                            <!--									<label>-->
                            <!--										<input type="checkbox"> 记住我-->
                            <!--									</label>-->
                            <!--									<label class="pull-right">-->
                            <!--										<a href="page-reset-password.html">忘记了密码?</a>-->
                            <!--									</label>-->
                            <!--								</div>-->
                            <!--								此处的type是button，目的是为了避免form表单提交，刷新页面，不方便调试（余小小）-->
                            <button type="button" class="btn btn-primary btn-flat m-b-30 m-t-30" @click="login">登 录
                            </button>
                            <!--								使用其他方式登录-->
                            <!--								<div class="social-login-content">-->
                            <!--									<div class="social-button">-->
                            <!--										<button type="button" class="btn btn-primary bg-facebook btn-flat btn-addon m-b-10"><i class="ti-facebook"></i>Sign in with facebook</button>-->
                            <!--										<button type="button" class="btn btn-primary bg-twitter btn-flat btn-addon m-t-10"><i class="ti-twitter"></i>Sign in with twitter</button>-->
                            <!--									</div>-->
                            <!--								</div>-->
                            <div class="register-link m-t-15 text-center">
                                <p>你还没有账号 ? <a href="page-register.html"> 点击这里去注册</a></p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>


<!-- 引入JS文件 -->
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/vue/vue.js}"></script>
<script th:src="@{/static/vue/axios.min.js}"></script>
<script th:src="@{/static/jquery/jquery.js}"></script>


<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            appContext: '/vagrancy', //应用上下文
            user: {
                username: 'abo',
                password: 'abo'
            }
        },
        methods: {
            login() {
                // JSON.stringify封装JSON
                // 参考：https://www.zhihu.com/question/588587273?utm_id=0
                // console.log('你点击了登录哦:' + JSON.stringify(this.user))

                // 异步登录
                axios.post(this.appContext+"/users/login", this.user).then(res => {
                    if (res.data.code == 0){
                        alert("登录成功");
                        // 将登录ok的用户的token信息存储到Session域
                        window.sessionStorage.setItem('username',this.user.username);
                        // window.sessionStorage.setItem('token', res.data.token);
                        // 跳转到首页 走get请求
                        window.location.href = this.appContext+"/admin";
                    }else {
                        alert("登录失败："+res.data.msg);
                    }

                })
            }
        }
    })
</script>

</html>